import React from 'react';
import { connect } from 'dva';
import createG2 from 'g2-react';
import { baseUrl } from '../../config/system';
import { Button, Table, Form, Input,Row,Col,TreeSelect, Popconfirm, Select, DatePicker ,Tabs} from 'antd';
const { RangePicker } = DatePicker;
import DepartModal from '../../components/ledger/DepartModal';
const FormItem = Form.Item;
const TabPane = Tabs.TabPane
function AssetDepart({ dispatch, assetDepart, loading, form }) {
const roomOptions = assetDepart.roomList?assetDepart.roomList.map(d => <Option key={d.id}>{d.name}</Option>):[];
  const formItemLayout = {
    wrapperCol: { className: 'wrapper-col' },
  };
  function callback(key) {
    var formData=form.getFieldsValue();
    var objectData={};
    objectData.roomIds=formData.roomIds;
    objectData.typeIds=formData.typeIds;
    if(formData.dates!=null&&formData.dates.length>0){
      objectData.startDate=formData.dates[0];
      objectData.endDate=formData.dates[1];
    }
    dispatch({
        type: 'assetDepart/queryDepartList',
      payload:{...objectData},
    });
  }
  const Pie = createG2(chart => {
    chart.col('label', {
     alias: '领用部门'
    });
    chart.axis('value', {
      line: {
        lineWidth: 1, // 设置线的宽度
        stroke: '#000' //  设置线的颜色
      }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
      formatter: function(val) {
            return (val / 1 )+"";
          },
      labels: {
        label: {
          textAlign: 'center', // 文本对齐方向，可取值为： left center right
          fill: '#000', //文本的颜色
          fontSize: '12', // 文本大小
          rotate: 0 // 旋转角度
        }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
        autoRotate: true // 是否需要自动旋转
      },
      title: '类型台账', // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
      tickLine: {
        lineWidth: 1,
        stroke: '#000',
        value: 5,
      }, // 坐标点对应的线，null 不显示 图形属性
      labelOffset: 16, // 标轴文本距离轴线的距离
      grid: null, // 坐标轴栅格线的配置信息，默认只有左边的坐标轴带有栅格线，null 为不显示。
      gridAlign: 'middle',
    });
    chart.axis('label', {
      line: {
        lineWidth: 1, // 设置线的宽度
        stroke: '#000' //  设置线的颜色
      }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
      labels: {
        label: {
          textAlign: 'center', // 文本对齐方向，可取值为： left center right
          fill: '#000', //文本的颜色
          fontSize: '12', // 文本大小
          rotate: 0 // 旋转角度
        }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
        autoRotate: true // 是否需要自动旋转
      },
      labelOffset: 16, // 标轴文本距离轴线的距离
      tickLine: null, // 坐标点对应的线，null 不显示 图形属性
      title: null, // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
    });
    chart.interval().position('label*value')
      .color('label',['#2cb7f5'])
      .label('value',{
        label: {
          fill: '#fff', //文本的颜色
          fontSize: '12', // 文本大小
        },
      })
    chart.render();
  });
  let plotCfg = {
    margin: [20, 180,80,80]
  };
   
    const handleGetOutEdit = () => {
        let param = JSON.stringify({ ...getFieldsValue() });
        param = encodeURIComponent(param);
        window.open(baseUrl+"/dataExcel/exportAssetDepart.jhtml?param="+param);
    }
    function onChange(value){
      console.log(value);
    }
    const modalDetailProps = {
        visible: assetDepart.modalVisible,
        maskClosable: false,
        dispatch: dispatch,
        detailList:assetDepart.detailList,
        pageNum:assetDepart.pageNum,
        pageSize:assetDepart.pageSize,
        total:assetDepart.total,
        roomId:assetDepart.roomId,
        brandId:assetDepart.brandId,
        title:'品牌明细',
        wrapClassName: 'vertical-center-modal',
        onCancel () {
          dispatch({
              type: 'assetDepart/hideModal',
          })
        },
    }
  const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    return (
      <div style={{backgroundColor:'#fff'}}>
        <div style={{minHeight:'100%'}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'50px',paddingLeft:'20px',paddingTop:'10px', paddingRight:'20px'}}>
          <Form layout="inline" style={{width:'100%'}}>
            <Row gutter={16}>
              <Col span={5}>
                <FormItem style={{ width: '100%' }} {...formItemLayout}>
                 {getFieldDecorator('roomIds')(
                    <Select
                    showSearch
                    mode="multiple"
                    style={{ width: '100%' }}
                    placeholder="选择机房"
                    optionFilterProp="children"
                  >
                  {roomOptions}
                </Select>
                )}
                </FormItem>
              </Col>
              <Col span={5}>
                <FormItem style={{ width: '100%' }} {...formItemLayout}>
                  {getFieldDecorator('typeIds')(
                    <TreeSelect  
                    optionFilterProp="children" 
                    showSearch 
                    allowClear 
                    multiple={true}
                    treeCheckable={true} 
                    placeholder="请选择部门" 
                    showCheckedStrategy={"SHOW_ALL"}
                    treeData={assetDepart.departments}
                    style={{ width: '100%' }}
                  />
                  )}
                  </FormItem>
              </Col>              
              <Col span={5}>
                <FormItem style={{ width: '100%' }} {...formItemLayout}>
                 {getFieldDecorator('dates')(
                    <RangePicker style={{ width: '100%' }} format="YYYY-MM-DD" />
                 )}
                </FormItem>
              </Col>
              <Col span={4}></Col>
              <Col span={5} style={{textAlign: 'right'}}>             
                <FormItem>
                  <Button type="primary" size='large' onClick={callback.bind(this,0)}  icon="search">查询</Button>
                </FormItem>             
                <FormItem>
                  <Button size="large" onClick={handleGetOutEdit} icon="download" >导出</Button>
                </FormItem>    
              </Col>
            </Row>        
          </Form>
          </div>
            <div style={{width:'100%',height:'100%',paddingLeft:'20px',paddingTop:'20px',paddingRight:'20px'}}>
            <Tabs onChange={callback}  type="card">
            <TabPane tab={'列表'}  key="table">
              <Table
                columns={assetDepart.departColumnsList}
                dataSource={assetDepart.departList}
                pagination={false}
                rowKey={record => record.id}
                loading={assetDepart.departLoading}
                scroll={{ x:assetDepart.departWidth,}}
              />
            </TabPane>
             <TabPane tab={'图表'}  key="echart">
              <Pie key={new Date().valueOf()} data={assetDepart.chartData}   height={600} plotCfg={plotCfg} forceFit={true}/>
             </TabPane>
           </Tabs>
            </div>
            <DepartModal {...modalDetailProps} />
       </div>
     </div>
  );
}

function mapStateToProps(state) {
  return { assetDepart : state.assetDepart};
}

AssetDepart = Form.create()(AssetDepart);

export default connect(mapStateToProps)(AssetDepart);
